<script setup lang="ts">
import TopCategoryBread from "./components/TopCategoryBread.vue";
import XtxCarousel from "../../components/XtxCarousel.vue";
import { useCategoryStore } from "@/stores/categoryStore";
import AllSubCategories from "./components/AllSubCategories.vue";
import RecommendsGoods from "./components/RecommendsGoods.vue";

const categoryStore = useCategoryStore();
const { banner } = storeToRefs(categoryStore);
const { getBanners } = categoryStore;

getBanners();
</script>

<template>
  <div class="container">
    <!-- 面包屑导航 -->
    <TopCategoryBread />
    <!-- 轮播图 -->
    <XtxCarousel
      :style="{ height: '500px' }"
      :count="banner.result.length"
      v-if="banner.result.length > 0"
    >
      <template
        v-for="(item, index) in banner.result"
        :key="item.id"
        v-slot:[`default-${index}`]
      >
        <RouterLink :to="item.hrefUrl">
          <img :src="item.imgUrl" :alt="item.imgUrl" />
        </RouterLink>
      </template>
    </XtxCarousel>
    <!-- 当前一级分类下的二级分类列表 -->
    <AllSubCategories />
    <!-- 二级分类推荐商品 -->
    <RecommendsGoods />
  </div>
</template>
